
<template>
  <div class="scroller">
    <div class="search">
      <input type="text" placeholder="搜索"/>
      <button>其</button>
    </div>
    <div class="session-list">
      <div class="session" v-for="(session, index) in sessionStore.sessionList"
           :class="sessionUser !== null && sessionUser.userId === session.userId ? 'active' : ''"
           :key="session.id" @click="clickSession(index, session)">
        <div class="avatar">
          <img :src="session.avatarUrl" alt=""/>
          <div class="count" v-if="session.messageCount > 99">99+</div>
          <div class="count" v-else-if="session.messageCount > 0">{{session.messageCount}}</div>
        </div>
        <div class="content">
          <div class="top">
            <div class="time">{{session.time}}</div>
            <div class="name">{{session.nickName}}</div>
          </div>
          <div class="message">{{session.message}}</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import useSessionStore from "@/store/Session.js";

const emits = defineEmits(['clickSession'])
const sessionStore = useSessionStore()
const sessionUser = sessionStore.getSession()

async function clickSession(index, session) {
  await sessionStore.changeSession({index, session})
  emits('clickSession')
}
</script>

<style scoped>
.scroller {
  width: 20%;
  min-width: 300px;
  height: 100%;
  border-right: 1px solid #dee0e3;
  overflow: auto;
  .search {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    input {
      height: 26px;
      border: 1px solid #dee0e3;
      border-radius: 20px;
      padding: 0 10px;
      font-size: 12px;
    }
    button {
      margin-left: 8px;
      background-color: #fff;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #dee0e3;
    }
  }
  .session {
    height: 60px;
    display: flex;
    cursor: pointer;
    .avatar {
      padding: 10px;
      .count {
        position: relative;
        background-color: #bbbfc4;
        margin: -50px -4px 0 20px;
        border-radius: 10px;
        border: 1px solid #ffffff;
        color: #ffffff;
        font-size: 10px;
        text-align: center;
      }
    }
    .content {
      padding: 6px 0;
      width: 100%;
      .top {
        height: 28px;
        line-height: 28px;
        display: flex;
        flex-direction: row-reverse;
        .name {
          font-size: 15px;
          overflow: hidden;
          width: calc(100% - 50px);
          display: flex;
        }
        .time {
          font-size: 12px;
          color: #8f959e;
          width: 50px;
          text-align: center;
        }
      }

      .message {
        font-size: 12px;
        height: 20px;
        margin-right: 5px;
        line-height: 20px;
        color: #8f959e;
        overflow: hidden;
      }
    }
  }
  .session:hover {
    background-color: #cce0ff;
  }
  .active {
    background-color: #eff0f1;
  }
}

</style>